<template>
  <div class="grid">
    <van-swipe class="my-swipe" indicator-color="#f90">
      <van-swipe-item v-for="(list, index) in gridlist" :key="index">
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="item in list" :key="item.thumb_image">
            <van-image class="van_img" :src="item.thumb_image" />
            <span>{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "grid",
  props: {
    gridlist: Array,
  },
  created() {},
};
</script>

<style lang="less" scoped>
.grid {
  background-color: #fff;
  .van-grid {
    margin-top: 15px;
  }
  /deep/.van-grid-item__content {
    margin-bottom: 10px;
  }
  .my-swipe {
    padding-bottom: 40px;
  }
  .van_img {
    width: 90px;
    height: 90px;
  }
  span {
    font-size: 24px;
    color: #333333;
  }
  /deep/.van-grid-item__content {
    padding: 0;
  }
  // /deep/.van-swipe__indicators {
  //   margin-bottom: -9px;
  // }
}
</style>
